<template>
	<div class="todo-list">
		<van-empty description="空空如也!" v-show="list.length==0" />

		<div class="todo-item" v-for="item in list" :key="item.id">
			<van-cell :title="item.name" :class="item.done?'item-label-completed':''">
				<template #icon>
					<van-icon :name="item.done ? 'passed' :'clock-o'" @click="checkDone(item)" />
				</template>
				<template #right-icon>
					<van-icon name="clear" @click="delTodo(item.id)" />
				</template>
			</van-cell>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {}
		},

		methods: {
			checkDone(item) {
				item.done = !item.done
			},

			delTodo(id) {
				this.$emit('delTodo', id) //emit前一定要加上$
			}
		}
	}
</script>

<style scoped>
	.van-cell {
		font-size: 18px;
	}

	.van-icon {
		padding-right: 10px;
		font-size: 20px;
	}

	.item-label-completed {
		color: #949494;
		text-decoration: line-through;
	}
</style>